<template>
  <div class="lssc">
    <div v-for="(item, index) in data" :key="index" class="lsscitem">
      <div class="icon">
        <img :key="item.icon" :src="getUrl()" />
      </div>
      <div class="title">
        <span class="wz">{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  data: {
    type: Array,
    default() {
      return [];
    }
  }
});
const lsscList = ref([
  {
    title: '全国文明村镇',
    icon: 'czrk'
  },
  {
    title: '全国妇联基层组织建设示范村',
    icon: 'gdbyl'
  },
  {
    title: '百县千乡万村无邪教示范村',
    icon: 'jbnt'
  }
]);
const getUrl = () => {
  return new URL(`../../../../assets/szxc/ry.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.lssc {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0px 10px 0px 32px;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  .lsscitem {
    display: flex;
    align-items: center;
    .title {
      font-weight: 400;
      margin-left: 10px;
      display: flex;
      font-family: 'DingTalk';
      .wz {
        font-size: 24px;
        background: linear-gradient(0deg, #b8efac 0.5126953125%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .icon {
      width: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 26px;
    }
  }
}
</style>
